﻿@page
@model BookListRazor.Pages.BookList.IndexModel


<br />
<div class="container row p-0 m-0">
    <div class="col-9">
        <h2 class="text-info">Book List</h2>
    </div>
    <div class="col-3">
        <a asp-page="Create" class="btn btn-info form-control text-white">Create New Book</a>
    </div>


    <div class="col-12 border p-3 mt-3">
        <form method="post">
            @if (Model.Books.Count() > 0)
            {
                <table class="table table-striped border">
                    <tr class="table-secondary">
                        <th>
                            <label asp-for="Books.FirstOrDefault().Name"></label>
                        </th>
                        <th>
                            @*@Html.DisplayNameFor(m=>m.Books.FirstOrDefault().Author)*@
                            <label asp-for="Books.FirstOrDefault().Author"></label>
                        </th>
                        <th>
                            <label asp-for="Books.FirstOrDefault().ISBN"></label>
                        </th>
                        <th>

                        </th>
                    </tr>
                    @foreach (var item in Model.Books)
                    {
                        <tr>
                            <td>
                                @Html.DisplayFor(m => item.Name)
                            </td>
                            <td>
                                @Html.DisplayFor(m => item.Author)
                            </td>
                            <td>
                                @Html.DisplayFor(m => item.ISBN)
                            </td>
                            <td>
                                <button asp-page-handler="Delete" asp-route-id="@item.Id" onclick="return confirm('Are you sure you want to delete?')" class="btn btn-danger btn-sm">Delete</button>
                                <a asp-page="Edit" asp-route-id="@item.Id" class="btn btn-success btn-sm text-white">Edit</a>
                            </td>
                        </tr>
                    }
                </table>
            }
            else
            {
                <p>No books available.</p>
            }
        </form>
    </div>


    <div class="col-12" style="text-align:center">
        <br />
        <span class="h3 text-info">OR</span>
        <br /><br />
    </div>
    <div class="col-12 border p-3">

        <table id="DT_load" class="table table-striped table-bordered" style="width:100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th> Author</th>
                    <th> ISBN</th>
                    <th></th>
                </tr>
            </thead>
        </table>
    </div>
</div>
@section Scripts{ 
    <script src="~/js/bookList.js"></script>
}



